{% if isFramework("react") %}
## Testing with React Testing Library

To illustrate an alternative approach, the following snippet demonstrates testing a simple configuration of AG Grid with the [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/).

```js
import { getByText, getByTestId } from '@testing-library/react';
import '@testing-library/jest-dom';

import { 
    createGrid,
    GridOptions, 
    agTestIdFor,
    setupAgTestIds,
} from 'ag-grid-community';

setupAgTestIds();

function createAgGrid() {
    const div = document.createElement('div');

    const gridOptions: GridOptions = {
        columnDefs: [
            { headerName: 'Make', field: 'make' },
            { headerName: 'Model', field: 'model' },
            { 
                field: 'price', 
                valueFormatter: (params) => '$' + params.value.toLocaleString() 
            },
        ],
        rowData: [
            { make: 'Toyota', model: 'Celica', price: 35000 },
            { make: 'Ford', model: 'Mondeo', price: 32000 },
            { make: 'Porsche', model: 'Boxster', price: 72000 },
        ],
        getRowId: ({ data }) => `${data.make.toLowerCase()}-${data.model.toLowerCase()}`,
    };

    const api = createGrid(div, gridOptions);

    return { div, api };
}

test('examples of some things', async () => {
    const { div, api } = createAgGrid();

    // Get a cell value
    expect(getByTestId(div, agTestIdFor.cell('ford-mondeo', 'make'))).toHaveTextContent('Ford');

    // Test the value formatter by searching for the correct price string
    expect(getByText(div, '$72,000')).toBeDefined();

    // Test via the api even though this is not a recommended approach
    expect(api.getDisplayedRowCount()).toBe(3);
});
```
{% /if %}
